<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/main.js"></script>
</head>
<style>
    .topbg {
        width: 100%;
        height: 270px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url("./img/signinTopBg.png");
    }

    #app {
        background: linear-gradient(#d7466a, #b446a9);
    }

    .allContainer {
        height: 250px;
        background-color: white;
        margin: -3px 16px 16px;
        padding: 16px;
        border-radius: 20px;
    }

    .itemContainer {
        height: 160px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .signItemSelect {
        background: linear-gradient(to right, #f4b84e, #ed6e3e);

    }

    .signItemSelect .day {

        color: rgb(255, 242, 242) !important;

    }

    .signItemSelect .coin {
        color: rgb(255, 242, 242) !important;
    }

    .signItemSelect .haveGet {
        width: 50px;
        height: 50px;
        position: absolute;
        right: -14px;
        bottom: -10px;
    }

    .signItem {
        position: relative;
        text-align: center;
        background-color: #efefef;
        border-radius: 6px;
        width: 23%;
        height: 50%;
    }

    .signItem .day {
        margin: 6px 0;
        font-size: 14px;
        color: black;
    }

    .signItem .coin {
        font-size: 10px;
        color: #d1d1d1;
    }

    .signItem img {
        width: 20px;
        height: 20px;
    }

    .signItem:not(:nth-child(4n)) {
        margin-right: calc(8% / 3);
        margin-bottom: calc(8% / 3);
    }

    .signItem:last-child {
        width: calc(46% + 8% / 3);
        margin-right: 0;
    }

    .getReward {
        width: 50%;
        background-color: #ed934a;
        color: white;
        position: absolute;
        left: 50%;
        margin-left: -25%;
        margin-top: 30px;
        height: 40px;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;

    }

    .finish {
        background-color: rgb(239, 239, 239) !important;
    }
</style>

<body>
    <div id="app">
        <mynav title="七天签到" @back="goBack"></mynav>
        <div class="topbg">

        </div>
        <div class="allContainer">
            <ul class="itemContainer">
                <dl :class="[item.isSign?'signItem signItemSelect':'signItem']" v-for="(item,index) in signData">
                    <p class="day">第{{index+1}}天</p>
                    <img src="./img/coin.png" />
                    <p class="coin">{{item.coin}}</p>
                    <img v-show="item.isSign" src="./img/haveget.png" class="haveGet" />
                </dl>

            </ul>
            <div :class="[finish?'getReward finish':'getReward']" @click="signIn">{{finish?'已签到':'签到'}}</div>
        </div>
    </div>
</body>
<script>

    new Vue({
        el: '#app',
        data: {
            finish: false,
            signData: [
                { coin: "1金币", isSign: false },
                { coin: "3金币", isSign: false },
                { coin: "5金币", isSign: false },
                { coin: "7金币", isSign: false },
                { coin: "10金币", isSign: false },
                { coin: "13金币", isSign: false },
                { coin: "15金币", isSign: false },
            ]
        },
        created: function () {

        },
        methods: {
            goBack: function () {
                SignInJSFace.back()
            },
            signIn: function () {
                let flag = false;
                if (this.finish) {
                    return
                }
                for (var i = 0; i < this.signData.length; i++) {
                    if (i + 1 == this.signData.length) {
                        break
                    }
                    if (this.signData[i].isSign && !this.signData[i + 1].isSign) {
                        this.signData[Number(i + 1)].isSign = true
                        flag = true
                        this.finishSign()
                        break
                    }
                }
                if (!flag) {
                    this.signData[0].isSign = true
                    this.finishSign()
                }

            },
            finishSign: function () {
                this.finish = true
            }
        }
    })

</script>

</html>